<template>
  <common-card title="累计用户数" :value="usersTotal|numberFormat">
    <template>
      <v-chart :option="getOption()" autoresize/>
    </template>
    <template v-slot:bottom>
      <div class="total-users-bottom">
        <div>日同比</div>
        <div class="emphasis">{{userGrowthLastDay}}%</div>
        <div class="increment"></div>
        <div class="right">月同比</div>
        <div class="emphasis">{{userGrowthLastMonth}}%</div>
        <div class="decrement"></div>
      </div>
    </template>
  </common-card>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'TotalUsers',

  computed: {
    ...mapState({
      "usersTotal": state => state.data.reportData.usersTotal, // 今日用户数
      "usersLastDay": state => state.data.reportData.usersLastDay, // 昨日用户数
      "usersLastMonth": state => state.data.reportData.usersLastMonth, // 上月用户数
      "userGrowthLastDay": state => state.data.reportData.userGrowthLastDay, // 日增长率
      "userGrowthLastMonth": state => state.data.reportData.userGrowthLastMonth, // 月增长率
    })
  },

  methods: {
    getOption () {
      return {
        xAxis: {
          show: false,
          min: 0, // 最小值
          max: this.usersTotal // 最大值
        },
        yAxis: {
          show: false,
          // 将y轴指定为类轴
          type: 'category'
        },
        series: {
          name: '用户增长量',
          type: 'bar',
          data: [this.usersTotal - this.usersLastMonth],
          barWidth: 10,
          showBackground: true, // 显示背景颜色
          // 文本
          label: {
            show: true,
            position: 'right',
            formatter: '|',  // 自定义文本
            color: 'yellowgreen'
          }
        },
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        },
        tooltip: {
          formatter (params) {
            console.log(params)
            // seriesName: 系列名称
            // marker: 圆点标签
            // value: 数据值
            const {seriesName, marker, value} = params
            return `${seriesName}<br>${marker}: ${value}`
          }
        },
        color: 'yellowgreen'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .total-users-bottom {
    display: flex;
    align-items: center;
    .right {
      margin-left: 10px;
    }
  }
</style>
